<template>
	<view class="information" @click="hotNews">
		<image class="bg" :src="data.image_input"></image>
		<text class="title">{{data.title}}</text>
		<text class="content-mes">{{data.synopsis}}</text>
		<view class="bottom-view">
			<view class="row-center">
				<image class="number_icon" src="../../../static/images/hot_number.png"></image>
				<text class="number">{{data.visit}}</text>
			</view>
			<view class="row-center">
				<image class="number_icon" src="../../../static/images/shaer_number.png"></image>
				<text class="number">{{data.share_count}}</text>
			</view>
			<view class="row-center">
				<image class="number_icon" src="../../../static/images/pj_number.png"></image>
				<text class="number">{{data.comment_count}}</text>
			</view>
			<view class="row-center">
				<image class="number_icon" src="../../../static/images/like_number.png"></image>
				<text class="number">{{data.praise_count}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
		  data:{
			  type:Object,
			  default: () => {}
		  }	
		},
		data() {
			return {
				
			}
		},
		methods:{
			hotNews(){
				uni.navigateTo({
					url:'/pages/hotNewDetails/index?type=1&id=' + this.data.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.information{
		width: 690upx;
		margin: 30upx auto 0;
		background-color: #fff;
		border-radius: 30upx;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.bg{
			width: 100%;
			height: 436upx;
			// background-color: blue;
		}
		.title{
			color: #323643;
			font-size: 32rpx;
			font-weight: 500;
			margin-left: 20upx;
			margin-top: 16upx;
			margin-right: 6upx;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			line-clamp: 1;
			-webkit-box-orient: vertical;
		}
		.content-mes{
			margin: 10upx 20upx 30upx 20upx;
			color: #666;
			font-size: 24upx;
			line-height: 34upx;
		}
		.bottom-view{
			width: 100%;
			padding: 0 20upx;
			box-sizing: border-box;
			margin-bottom: 20upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.row-center{
				display: flex;
				align-items: center;
				color: #999;
				font-size: 20upx;
				.number_icon{
					width: 56upx;
					height: 56upx;
				}
			}
		}
	}
</style>
